<template>
    <div class="login">
        <el-form>
            <h3 class="title">大事件后台管理系统</h3>
            <div class="form-box" :class="{'show': status == 'login'}">
                <el-form-item label="">
                    <el-input v-model="form.user_name" placeholder="账号" />
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.password" placeholder="密码" type="password" />
                </el-form-item>
                <el-form-item style="width: 100%">
                    <el-button @click="loginHandler" type="primary" style="width: 100%">登录</el-button>
                </el-form-item>
                <el-form-item>
                    <div class="registerBtn" @click="status = 'register'">去注册</div>
                </el-form-item>
            </div>
            <div class="form-box" :class="{'show': status == 'register'}">
                <el-form-item label="">
                    <el-input v-model="form.user_name" placeholder="姓名" />
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.nick_name" placeholder="昵称" />
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.email" placeholder="邮箱" />
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.password" placeholder="密码" type="password" />
                </el-form-item>
                <el-form-item style="width: 100%">
                    <el-button @click="registerHandler" type="primary" style="width: 100%">注册</el-button>
                </el-form-item>
                <el-form-item>
                    <div class="registerBtn" @click="status = 'login'">返回登录</div>
                </el-form-item>
            </div>
        </el-form>
        <!--  底部  -->
        <div class="el-login-footer">
            <span>Copyright © 2018-2022 dsz All Rights Reserved.</span>
        </div>
    </div>
</template>

<script setup>
    import useStore from '@/store'
    const $store = useStore()
    import {
        useRouter
    } from 'vue-router'
    const $router = useRouter()
    import {
        ElMessage
    } from 'element-plus'
    import {
        ref
    } from 'vue'
    import {
        userLogin,
        userRegister
    } from '@/api'

    let status = ref('login')
    let form = ref({})
    let loginHandler = async _ => {
        let r = await userLogin(form.value)
        $store.setToken(r.data.token)
        ElMessage.success(r.msg)
        $router.push('/')
    }
    let registerHandler = async _ =>{
        let r = await userRegister(form.value)
        ElMessage.success(r.msg)
    }
</script>

<style scoped lang="scss">
    .login {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url('@/assets/bg.png');

        .registerBtn {
            text-align: right;
            color: #409eff;
            cursor: pointer;
        }

        .title {
            margin: 0px auto 30px auto;
            text-align: center;
            color: #707070;
            font-size: 30px;
        }

        .el-form {
            padding: 50px;
            border-radius: 10px;
            border: 1px solid #efefef;
            box-shadow: 5px 5px 5px #eee;
            position: relative;
            top: -10vh;
            padding-bottom: 0;
        }

        .form-box {
            opacity: 0;
            height: 0;
            transition: all 1s ease;
            overflow: hidden;

            &.show {
                height: unset;
                opacity: 1;
            }
        }

        .el-login-footer {
            height: 40px;
            line-height: 40px;
            position: fixed;
            bottom: 0;
            width: 100%;
            text-align: center;
            font-family: Arial;
            letter-spacing: 1px;
        }
    }
</style>